<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Data Admin Presentation</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 	<link type="text/css" rel="stylesheet" href="css/bootstrap.css" /> -->
<!-- 	<link type="text/css" rel="stylesheet" href="css/pagination.css" /> -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/chosen/chosen.css" />
		<link rel="stylesheet/less" href="css/less/main.less" />
		<script type="text/javascript" src="js/lib/less-1.3.0.min.js"></script>
		
		<link type="text/css" rel="stylesheet" href="css/main.css" />
		
		<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.21.custom.css"/>
		<link rel="stylesheet" type="text/css" media="screen"
			href="js/lib/poshytip/tip-darkgray/tip-darkgray.css" />
		<link rel="stylesheet" type="text/css" href="css/select2/select2.css">
		<style>
		td > input[type="text"]{
			width:80px;
		}
		
		textarea{
			width:100px;
		}
		</style>
		<!--[if IE 7]> 
		<style>
		.alpha{
			margin-top:8px;
		}
		</style>
		<![endif]-->
		
		<!-- Templates Here -->
		<script type="text/template" id="block_template">
				<div class="panel-container">
					<div class="panel-header">
						<div class="panel-title"><%= title %></div>
						<div class="panel-tab">
							<div><%= sub %></div>
							<span class="triangle"></span>	
						</div>
						<div class="panel-line"> </div>
						<div class="close"></div>
					</div>
					<div class="panel-body"></div>
				</div>
		</script>

		<script type="text/template" id="toggle_template">
			<div class="switch-wrapper">
			<div class="opt left" style="width:100%">&nbsp;&nbsp;<%= left %></div>
			<div class="opt right" style="width:0%"><%= right %>&nbsp;&nbsp;</div>
			<span class="helper">&nbsp;&nbsp;<%= left %></span>
			<span class="helper"><%= right %>&nbsp;&nbsp;</span>
			<div class="bar"></div>
			</div>
		</script>	
	
		<script type="text/template" id="combo_template">
			<select data-placeholder="<%= hint%>" class="combo-box">
				<option value=""></option>
				<%for(var i=0;i<opts.length;i++){%>	
					<%var opt=opts[i];%>
					<option ><%= opt%></option>
				<%}%>
			</select>
		</script>	
	
		<script type="text/template" id="tipItem_template">
			<li class="divider"></li>
			<li class="menu-item"> 
				<div class="item-wrapper" href="#">
					<span class='tip-val' ndaid='<%= v[1]%>'> 
					<%= v[0]%>
					</span>
					<span class='type-wrapper'>
						<%= v[2]%>
					</span>
				</div>
			</li>				
		</script>
	
		<script type="text/template" id="typesel_template">
			<div class="type-selector">
			    <span class="ltri"></span>
			    <span class="typesel-body">
				    <i class="icon-tags icon-white"></i>
				    <ul>
				      <li>
				          	<span><h4><%= val[0]%></h4><b></b></span>
					        <ul>
							<%for(var i=0;i<val.length;i++){%>				        	
					        	<li><h4><%= val[i]%> </h4></li>
					        <%}%>
		
					        </ul>
	
				      </li>
				    </ul>
				    <button class="close icon-white">&times;</button>
			    </span>
			</div>
		</script>	

		<script type="text/template" id="search_template">
			<div class="search-box ">
				<div class="switch" data-left="View" data-right="Add" step="toggleControl" clicking="setOverflow" clicked="rmOverflow"></div>
				<div class="input-prepend">
                  <span class="add-on"><i class="icon-search"></i></span><input type="text" placeholder="Type an identifier..."/>
                <div class='sticky'></div>
                </div>
				
				<div class="add-option">
					<div class="opt-view-port">
						<div class="switch" data-left="Quote" data-right="Issue" step="toggleInput" clicking="setShow" clicked="setHide"></div>
						<div class="combo" change="updateCategory"></div>
						<div class="combo"></div>
					</div>
				</div>
				<button class="btn">Go!</button>
			</div>
		</script>

		<script type="text/template" id="line_template">
			<div class="line-editor">
				<%for(var i in fields){%>
					<%var f=fields[i];%>	
					<div>
						<div class="input-prepend">
							<span class="add-on"><%= f[0]%></span><input class="span2" size="16" type="text" col="<%= f[1]%>"/>
						</div>
					</div>
				<%}%>
			</div>	
		</script>
								
		<script type="text/template" id="table_template">
			<table class="tablesorter table-hover table table-bordered table-striped"> 
				<thead> 
				<tr> 
					<%for(var i in headers){%>	
						<%var h=headers[i];%>
						<th><%= h%></th>
					<%}%>
				</tr>
				</thead>
				<tbody> 
				</tbody>
			</table> 	
		</script>
		<script type="text/template" id="rows_template">
			<%for(var i in data){%>	
				<%var row=data[i];%>
				<tr>
					<%for(var j=0;j<row.length;j++){%>	
						<%var c=row[j];%>
						<td><%= c%></td>
					<%}%>		
				</tr>
			<%}%>
		</script>	
		<script type="text/template" id="alert_template">
			<div class="alert fade in">
	            <button type="button" class="close" data-dismiss="alert">&times;</button>
	            <%= c%>
	          </div>
		</script>	
	</head>

	<body style="position:relative;">
		<div id="main_body">
			<div id="header" class="header">
				<div class="index-logo"></div>
				<div class="title">Data Admin Presentation</div>
				<div class="signin-bar">
					<div class="signin_div">
						<button class="btn btn-primary signin" type="button">
							<b>Log In</b>
						</button>
					</div>
					<div class="pop-over clearfix fancy-scrollbar">
						<div class="header clearfix">
							<span class="header-title">Log In</span>
							<a class="close-btn js-close-popover" href="#">
								<span class="app-icon small-icon close-icon dark-hover"></span>
							</a>
						</div>
						<div class="content clearfix" style="">
							<div class="login-popover">
								<p>
									<label for="username">Username</label>
									<input id="username"
									name="username" title="username" type="text"
									placeholder="Username" />
								</p>
								<p>
									<label for="password">Password</label>
									<input id="password"
									name="password" title="password" type="password"
									placeholder="Password" />
								</p>
								<p class="remember">
									<input id="signin_submit" value="Log In" type="button" class="btn btn-success" />
									<input id="remember" name="remember_me" value="1" type="checkbox" />
									<b style="margin-left:2px;">Remember me</b>
								</p>
								<p class="forgot">
									<a href="javascript:void(0);" id="resend_password_link">Forgot your password?</a>
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="welcome-bar" style="display:none;">
					<div class="signin_div">
						<span>Welcome, XXX</span>
						<button class="btn btn-primary" id="logout_button" type="button">
							<b>Logout</b>
						</button>
					</div>
				</div>
			</div>

			<div class="body">
				<!-- main content here -->

			</div>

					<div class="pagination pagination-centered">
						<ul>
							<li>
								<a href="#page/1">1</a>
							</li>
							<li class="active">
								<a href="#page/2">2</a>
							</li>
						</ul>
					</div>	
					
											
		<div class="table-container"></div>
		</div>
		
		<script type="text/javascript" src="js/lib/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="js/lib/underscore-min.js"></script>
		<script type="text/javascript" src="js/lib/backbone-min.js"></script>
		<script type="text/javascript" src="js/lib/zoomgrid/ZoomGrid.js"></script>
<!-- 		<script type="text/javascript" src="js/lib/zoomgrid/ZoomGridHighlight.js"></script>
		<script type="text/javascript" src="js/lib/zoomgrid/ZoomGridTransparency.js"></script>
		<script type="text/javascript" src="js/lib/zoomgrid/ZoomGridRestoreButton.js"></script>		 -->		
		<script type="text/javascript" src="js/lib/chosen.jquery.js"></script>	
		<script type="text/javascript" src="js/lib/jquery.pagination.js"></script>	
<!-- 		<script type="text/javascript" src="js/lib/bootstrap-rowlink.js"></script>	-->
		<script type="text/javascript" src="js/lib/bootstrap-alert.js"></script>
<!-- 		<script type="text/javascript" src="js/lib/bootstrap-popover.js"></script> -->
					
		<script type="text/javascript" src="js/utils.js"></script>		
		<script type="text/javascript" src="js/models.js"></script>
		<script type="text/javascript" src="js/popup.js"></script>

		<script type="text/javascript" src="js/views/Button.js"></script>		
		<script type="text/javascript" src="js/views/TipsMenu.js"></script>		
		<script type="text/javascript" src="js/views/AssetView.js"></script>		
		<script type="text/javascript" src="js/views/Block.js"></script>
		<script type="text/javascript" src="js/views/Layout.js"></script>
		<script type="text/javascript" src="js/views/Table.js"></script>
		<script type="text/javascript" src="js/views/InputList.js"></script>
		<script type="text/javascript" src="js/views/RootEntryView.js"></script>
		<script type="text/javascript" src="js/views/URicEntryView.js"></script>
		
		<script src="js/lib/jquery-ui-1.8.14.custom.min.js"></script>
		<script src="js/lib/mustache.js" type="text/javascript"></script>
		<script src="js/lib/bootstrap-dropdown.js"></script>
		<script src="js/lib/select2.js" type="text/javascript"></script>
		<script src="js/lib/poshytip/jquery.poshytip.js" type="text/javascript"></script>				
		<script src="js/lib/jquery.blockUI.js"></script>
		
		<!-- views -->
		<script src="js/backbone-page.js" type="text/javascript"></script>
		<script src="js/backbone-form.js" type="text/javascript"></script>
		<script src="js/backbone-form-jui-ext.js" type="text/javascript"></script>
		<script src="js/backbone-table.js" type="text/javascript"></script>
		
		<!-- templates -->
		<script src="js/templates/page-bootstrap.js" type="text/javascript"></script>
		<script src="js/templates/form-bootstrap.js" type="text/javascript"></script>
		<script src="js/templates/table-bootstrap.js" type="text/javascript"></script>
		
		<!-- page -->
		<script src="js/page/commodity.js" type="text/javascript"></script>
		
		<script type="text/javascript" src="js/app.js"></script>
		<script type="text/javascript">

			var list = new ItemList([
				{title: 'Asset', sub:'Body'},
				{title: 'Bulk', sub:'Body'},
				{title: 'Root', sub:'Body'},
				{title: 'URIC', sub:'Body'},				
				{title: 'Root1', sub:'Body'},
				{title: 'URIC1', sub:'Body'}				
			]);
			$(function(){
				var size={
					w:$(window).width(),
					h:$(window).height()
				}
				
				var body = new Layout({collection: list});
				for(var v in view_model){
					body.addSubView(v, view_model[v]);
				}	
				$(".body > .screen").height(size.h -120);
				body.currentGrid.restore(true);
				$(window).resize(function() {
				  body.currentGrid.restore(true);
				});	
				


				

				
				

			})

		</script>

	</body>
</html>